<template>
  <div class="week-preview">
  	<div style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #CCCCCC;">
  		<div style="display: flex;align-items: center;width: 60%;">
  			<div style="width: 30px;">本<br>周<br>训<br>练<br>任<br>务</div>
  			<div style="word-break: break-word;padding: 20px;" v-html="previewData[0].content"></div>
  		</div>
  		<div style="width: 40%">
  			<div style="height: 100px;display: flex;align-items: center;border-bottom: 1px solid #CCCCCC;">
  				<div style="width: 60px;margin-right: 20px;">训练总时</div>
  				<div v-html="previewData[1].val"></div>小时
  			</div>
  			<div style="height: 200px;display: flex;align-items: center;">
  				<div style="width: 60px;margin-right: 20px;">训练内容比重</div>
  				<div>
  					<div>一般素质<span v-html="previewData[2].val"></span>(%)</div>
  					<div>专项素质<span v-html="previewData[3].val"></span>(%)</div>
  					<div>技, 战术<span v-html="previewData[4].val"></span>(%)</div>
  					<div>其他内容<span v-html="previewData[5].val"></span>(%)</div>
  				</div>
  			</div>
  		</div>
  	</div>
  	<div>
  		<div class="week-day">
  			<div>星期</div>
  			<div>训练内容<br>(早操或上午训练)</div>
  			<div>训练内容<br>(下午训练)</div>
  			<div>负荷</div>
  			<div>操作</div>
  		</div>
  		<div :class="currentDay == 1?'current-bg':''" class="week-day">
  			<div>一</div>
  			<div v-html="previewData[6].content"></div>
  			<div v-html="previewData[7].content"></div>
  			<div v-html="previewData[8].val"></div>
  			<div style="display: flex;align-items: center;">
          <el-button @click="previewChange(previewData[6].content,previewData[7].content)" v-show="currentDay == 1" type="primary" size="mini">使用</el-button>
        </div>
  		</div>
  		<div :class="currentDay == 2?'current-bg':''" class="week-day">
  			<div>二</div>
  			<div v-html="previewData[9].content"></div>
  			<div v-html="previewData[10].content"></div>
  			<div v-html="previewData[11].val"></div>
        <div style="display: flex;align-items: center;">
          <el-button @click="previewChange(previewData[9].content,previewData[10].content)" v-show="currentDay == 2" type="primary" size="mini">使用</el-button>
        </div>
  		</div>
  		<div :class="currentDay == 3?'current-bg':''" class="week-day">
  			<div>三</div>
  			<div v-html="previewData[12].content"></div>
  			<div v-html="previewData[13].content"></div>
  			<div v-html="previewData[14].val"></div>
        <div style="display: flex;align-items: center;">
          <el-button @click="previewChange(previewData[12].content,previewData[13].content)" v-show="currentDay == 3" type="primary" size="mini">使用</el-button>
        </div>
  		</div>
  		<div :class="currentDay == 4?'current-bg':''" class="week-day">
  			<div>四</div>
  			<div v-html="previewData[15].content"></div>
  			<div v-html="previewData[16].content"></div>
  			<div v-html="previewData[17].val"></div>
        <div style="display: flex;align-items: center;">
          <el-button @click="previewChange(previewData[15].content,previewData[16].content)" v-show="currentDay == 4" type="primary" size="mini">使用</el-button>
        </div>
  		</div>
  		<div :class="currentDay == 5?'current-bg':''" class="week-day">
  			<div>五</div>
  			<div v-html="previewData[18].content"></div>
  			<div v-html="previewData[19].content"></div>
  			<div v-html="previewData[20].val"></div>
        <div style="display: flex;align-items: center;">
          <el-button @click="previewChange(previewData[18].content,previewData[19].content)" v-show="currentDay == 5" type="primary" size="mini">使用</el-button>
        </div>
  		</div>
  		<div :class="currentDay == 6?'current-bg':''" class="week-day">
  			<div>六</div>
  			<div v-html="previewData[21].content"></div>
  			<div v-html="previewData[22].content"></div>
  			<div v-html="previewData[23].val"></div>
        <div style="display: flex;align-items: center;">
          <el-button @click="previewChange(previewData[21].content,previewData[22].content)" v-show="currentDay == 6" type="primary" size="mini">使用</el-button>
        </div>
  		</div>
  		<div :class="currentDay == 0?'current-bg':''" class="week-day">
  			<div>日</div>
  			<div v-html="previewData[24].content"></div>
  			<div v-html="previewData[25].content"></div>
  			<div v-html="previewData[26].val"></div>
        <div style="display: flex;align-items: center;">
          <el-button @click="previewChange(previewData[24].content,previewData[25].content)" v-show="currentDay == 0" type="primary" size="mini">使用</el-button>
        </div>
  		</div>
  	</div>
  </div>
</template>

<script>
  export default {
    props: {
      previewData: {
        type: Array,
        default: []
      },
      currentDay: {
        type: Number ,
        default: null
      }
    },
    methods: {
      previewChange(content1,content2) {
        let str = (content1?'上午：'+content1:'')+(content2?'下午：'+content2:'')
        this.$emit('previewWeekplanChange',str)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .week-preview{

  	   .current-bg{
  		   background-color: #8bde8a;
  	   }

  	   .week-day{
  		   width: 100%;
  	   	 display: flex;
  	   	 justify-content: space-between;
  	   	 min-height: 80px;
  	   	 border-bottom: 1px solid #CCCCCC;

  		  & > div:nth-child(1){
  			  width: 10%;
  			  overflow: hidden;
  			  display: flex;
  			  align-items: center;
  		  }
  		  & > div:nth-child(2){
  			  width: 35%;
  			  overflow: hidden;
  			  padding: 10px;
  		  }
  		  & > div:nth-child(3){
  			  width: 35%;
  			  overflow: hidden;
  			  padding: 10px;
  		  }
  		  & > div:nth-child(4){
  			  width: 20%;
  			  overflow: hidden;
  			  padding: 10px;
  		  }
  	   }
  }
</style>
